<template>
    <div class="right-panel_wrap">
        <div class="panel-item-title">运行区线</div>

        <div class="operation-chart">
            <!--发电曲线：kW-->
            <div class="chart-item" ref="fdLineChart"></div>

            <!--当日累计数据-->
            <div class="chart-item" ref="todayCountChart"></div>

            <!--故障告警统计-->
            <div class="chart-item" ref="warnStatChart"></div>
        </div>

        <div class="panel-item-title">加氢量信息</div>

        <div class="add-info">
            <div class="add-info-img"></div>

            <div class="chart-box" ref="addHydrogenChart"></div>
        </div>

    </div>
</template>

<script>
		import moment from 'moment';
		import { formatDate, getBeforeDays } from '@/utils/date.js';
		import { queryCharts, logStatistics } from '@/axios/api';
    export default {
        data() {
            return {
							dates:Array(24*12 + 1).fill(0).map((value,index)=>(('0'+Math.floor(index/12)).slice(-2)+':'+('0'+(index%12)*5).slice(-2))),
							dates2:[],
							chartsData:[],
							data1:[],
							data2:[],
							data3:[],
							data4:[],
							data5:[],
							data6:[],
							data7:[],
							data8:[],
							logData:[],
							timer:null

            }
        },
        methods: {
					queryChartsFn(){
						this.$api.queryCharts({
					    "Name":"h2-01_pv_power",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +'T00:00:00+08:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								// const dp = moment(item[0]).format('HH:00')
								// this.dates.push(dp);
								this.data1.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn2(){
                        this.$api.queryCharts({
					    "Name":"h2-01_utility_power",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +' 00:00:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data2.push(item[1].toFixed(2));
							})

						})
					},
					queryChartsFn3(){
                        this.$api.queryCharts({
					    "Name":"h2-01_fuelcell_power",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +' 00:00:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data3.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn4(){
                        this.$api.queryCharts({
					    "Name":"h2-01_realtime_h2_produce",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +' 00:00:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data4.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn5(){
                        this.$api.queryCharts({
					    "Name":"h2-01_realtime_h2_use",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +' 00:00:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data5.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn6(){
                        this.$api.queryCharts({
					    "Name":"h2-01_realtime_h2_storage",
					    "selector":"MEAN",
					    "begin":moment(new Date()).format('yyy-MM-DD') +' 00:00:00',
					    "end":moment(new Date()).format('yyy-MM-DDTHH:mm:ss') + '+08:00',
					    "groupBlock":"5m"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data6.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn7(){
                        this.$api.queryCharts({
					    "Name":"h2-01_realtime_h2_use",
					    "selector":"MEAN",
					    "begin":getBeforeDays(6),
					    "end":getBeforeDays(0),
					    "groupBlock":"1d"
						}).then(res=>{
							res.data.map((item,index)=>{
								const dp = moment(item[0]).format('MM.DD')
								this.dates2.push(dp);
								this.data7.push(item[1].toFixed(2));
							})
						})
					},
					queryChartsFn8(){
                        this.$api.queryCharts({
					    "Name":"h2-01_realtime_h2_use_times",
					    "selector":"MEAN",
					    "begin":getBeforeDays(6),
					    "end":getBeforeDays(0),
					    "groupBlock":"1d"
						}).then(res=>{
							res.data.map((item,index)=>{
								this.data8.push(item[1].toFixed(0));
							})
						})
					},
					logStatisticsFn(){
						this.$api.logStatistics().then(res=>{
							this.logData = res;
						})
					},
            /**
             * 加氢量信息
             * @param obj
             */
            addHydrogenChartLoad( obj ) {
                var _this = this;
                var dom = this.$refs.addHydrogenChart;
                var chart = this.$echarts.init( dom);

                var option = {
                    title: {
                        text: '实时加氢量',
                        textStyle: {
                            color: '#AEE0FF',
                            fontSize: 12,
                        },
                        top: 0,
                        padding: [0,0,0,5],
                    },
                    grid: {
                        top: 50,
                        right: '3%',
                        bottom: '3%',
                        left: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        // orient: 'vertical',
                        right: 65,
                        top: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        icon: 'circle',
                        itemGap: 17,
                        textStyle: {
                            color: '#4E6F92',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.names,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                                lineHeight: 15,
                            },
                            margin: 13,
                            interval: 0,
                        },

                    },
                    yAxis: [{
                        name: '加氢量（kg）',
                        nameLocation:'end',
                        nameTextStyle:{
                            color: "#4E6F92",
                            fontSize: 12,
                            padding: [0,-20,-2,0],
                        },
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0,191,255,0.3)',
                                type: 'dotted',
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                            },
                        },

                    },
                        {
                            name: '加氢次数',
                            nameLocation:'end',
                            nameTextStyle:{
                                color: "#4E6F92",
                                fontSize: 12,
                                padding: [0,0,-2,-6],
                            },
                            type: "value",
                            position: "right",
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#4E6F92",
                                    fontSize: 12,
                                },
                            }
                        },
                    ],
                    series: [{
                        name: "加氢量",
                        type: "line",
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#1675F0"
                        },
                        lineStyle: {
                            color: "#1675F0"
                        },
                        data: obj.data[0],
                    },{
                        name: "加氢次数",
                        type: "line",
                        yAxisIndex: 1,
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#C17700"
                        },
                        lineStyle: {
                            color: "#C17700"
                        },
                        data: obj.data[1],
                    },
                    ]
                };

                chart.setOption( option );
            },

            /**
             * 发电曲线：kW
             * @param obj
             */
            fdLineChartLoad( obj ) {
                var _this = this;
                var dom = this.$refs.fdLineChart;
                var chart = this.$echarts.init( dom);

                var option = {
                    title: {
                        text: '发电曲线：kW',
                        textStyle: {
                            color: '#AEE0FF',
                            fontSize: 12,
                        },
                        top: 20,
                        padding: [0,0,0,5],
                    },
                    grid: {
                        top: 57,
                        right: '3%',
                        bottom: '3%',
                        left: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 120,
                        top: 30,
                        itemWidth: 10,
                        itemHeight: 10,
                        icon: 'circle',
                        itemGap: 17,
                        textStyle: {
                            color: '#4E6F92',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.names,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                                lineHeight: 15,
                            },
                            margin: 13,
                            interval: 71,
                        },

                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0,191,255,0.3)',
                                type: 'dotted',
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                            },
                        },

                    },
                    series: [{
                        name: "光伏发电",
                        type: "line",
                        smooth: true,
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#00B6B0"
                        },
                        lineStyle: {
                            color: "#00B6B0"
                        },
                        data: obj.data[0],
                    },{
                        name: "市电",
                        type: "line",
                        smooth: true,
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#4E4BFC"
                        },
                        lineStyle: {
                            color: "#4E4BFC"
                        },
                        data: obj.data[1],
                    },{
                        name: "燃料电池发电",
                        type: "line",
                        smooth: true,
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#00B522"
                        },
                        lineStyle: {
                            color: "#00B522"
                        },
                        data: obj.data[2],
                    },
                    ]
                };

                chart.setOption( option );
            },

            /**
             * 当日累计数据
             * @param obj
             */
            todayCountChartLoad( obj ) {
                var _this = this;
                var dom = this.$refs.todayCountChart;
                var chart = this.$echarts.init( dom);

                var option = {
                    title: {
                        text: '当日累计数据',
                        textStyle: {
                            color: '#AEE0FF',
                            fontSize: 12,
                        },
                        top: 20,
                        padding: [0,0,0,5],
                    },
                    grid: {
                        top: 57,
                        right: '3%',
                        bottom: '3%',
                        left: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 120,
                        top: 30,
                        itemWidth: 10,
                        itemHeight: 10,
                        icon: 'circle',
                        itemGap: 17,
                        textStyle: {
                            color: '#4E6F92',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.names,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                                lineHeight: 15,
                            },
                            margin: 13,
                            interval: 71,
                        },
                    },
                    yAxis: {
                        name: '吨',
                        nameLocation:'end',
                        nameTextStyle:{
                            color: "#4E6F92",
                            fontSize: 12,
                            padding: [0,30,-5,0],
                        },
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0,191,255,0.3)',
                                type: 'dotted',
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                            },
                        },

                    },
                    series: [
                        {
                            name: "储氢量",
                            type: "line",
                            smooth: true,
                            // stack: 'Total',
                            // showAllSymbol: false, //显示所有图形。
                            symbol: "none", //标记的图形为实心圆
                            // symbolSize: 9, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "#26A63E"
                            },
                            lineStyle: {
                                color: "#26A63E"
                            },
                            // areaStyle: {
                            //     color: '#26A63E'
                            // },
                            data: obj.data[2],
                        },{
                        name: "加氢量",
                        type: "line",
                        smooth: true,
                        // stack: 'Total',
                        // showAllSymbol: false, //显示所有图形。
                        symbol: "none", //标记的图形为实心圆
                        // symbolSize: 9, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#1763C5"
                        },
                        lineStyle: {
                            color: "#1763C5"
                        },
                        // areaStyle: {
                        //     color: '#1763C5'
                        // },
                        data: obj.data[1],
                    },{
                            name: "制氢量",
                            type: "line",
                            smooth: true,
                            // stack: 'Total',
                            // showAllSymbol: false, //显示所有图形。
                            symbol: "none", //标记的图形为实心圆
                            // symbolSize: 9, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "#C1AC0B"
                            },
                            lineStyle: {
                                color: "#C1AC0B"
                            },
                            // areaStyle: {
                            //     color: '#C1AC0B'
                            // },
                            data: obj.data[0],
                        },
                    ]
                };

                chart.setOption( option );
            },

            /**
             * 故障告警统计
             * @param obj
             */
            warnStatChartLoad( obj ) {
                var _this = this;
                var dom = this.$refs.warnStatChart;
                var chart = this.$echarts.init( dom);

                var option = {
                    title: {
                        text: '故障告警统计',
                        textStyle: {
                            color: '#AEE0FF',
                            fontSize: 12,
                        },
                        top: 20,
                        padding: [0,0,0,5],
                    },
                    grid: {
                        top: 57,
                        right: '3%',
                        bottom: '3%',
                        left: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        // orient: 'vertical',
                        left: 120,
                        top: 30,
                        itemWidth: 10,
                        itemHeight: 10,
                        icon: 'circle',
                        itemGap: 17,
                        textStyle: {
                            color: '#4E6F92',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.names,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                                lineHeight: 15,
                            },
                            margin: 13,
                            interval: 0,
                        },

                    },
                    yAxis: {
                        name: '次',
                        nameLocation:'end',
                        nameTextStyle:{
                            color: "#4E6F92",
                            fontSize: 12,
                            padding: [0,30,-5,0],
                        },
                        type: "value",
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0,191,255,0.3)',
                                type: 'dotted',
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#4E6F92",
                                fontSize: 12,
                            },
                        },

                    },
                    series: [
                        {
                            name: "紧急",
                            type: "bar",
                            itemStyle:{                 //---图形形状
                                color:'#A92525',
                                barBorderRadius:[5,5,0,0],
                            },
                            barWidth: 10,              //---柱形宽度
                            barCategoryGap: 5,       //---柱形间距
                            data: obj.data[0],
                        },
                        {
                            name: "重要",
                            type: "bar",
                            itemStyle:{                 //---图形形状
                                color:'#C17700',
                                barBorderRadius:[5,5,0,0],
                            },
                            barWidth: 10,              //---柱形宽度
                            barCategoryGap: 5,       //---柱形间距
                            data: obj.data[1],
                        },
                        {
                            name: "次要",
                            type: "bar",
                            itemStyle:{                 //---图形形状
                                color:'#1675F0',
                                barBorderRadius:[5,5,0,0],
                            },
                            barWidth: 10,              //---柱形宽度
                            barCategoryGap: 5,       //---柱形间距
                            data: obj.data[2],
                        },
                        {
                            name: "提示",
                            type: "bar",
                            itemStyle:{                 //---图形形状
                                color:'#00B522',
                                barBorderRadius:[5,5,0,0],
                            },
                            barWidth: 10,              //---柱形宽度
                            barCategoryGap: 5,       //---柱形间距
                            data: obj.data[3],
                        },
                    ]
                };

                chart.setOption( option );
            },
        },
        mounted() {
					let that = this;
					this.queryChartsFn();
					this.queryChartsFn2();
					this.queryChartsFn3();
					this.queryChartsFn4();
					this.queryChartsFn5();
					this.queryChartsFn6();
					this.queryChartsFn7();
					this.queryChartsFn8();
					this.logStatisticsFn()
					setTimeout(function(){
							const data1 = [that.data1,that.data2,that.data3]
							that.addHydrogenChartLoad(
							    {
							        names: that.dates2,
							        data: [that.data7,that.data8],
							    }
							);

							that.fdLineChartLoad(
							    {
							        names: that.dates,
							        data: [
							            that.data1,
							            that.data2,
							            that.data3,
							        ],
							    }
							);

							that.todayCountChartLoad(
							    {
							        names: that.dates,
							        data: [
							            that.data4,
							            that.data5,
													that.data6,
							        ],
							    }
							);

							that.warnStatChartLoad(
							    {
							        names: ['故障', '告警',],
							        data: [
							            [that.logData.error.urgent, that.logData.warning.urgent],
							            [that.logData.error.important, that.logData.warning.important],
							            [that.logData.error.secondary, that.logData.warning.secondary],
							            [that.logData.error.general, that.logData.warning.general],
							        ],
							    }
							);
					},1000);
					clearInterval(that.timer);
					that.timer = setInterval(function(){
						that.dates2 = [];
						that.dates = Array(24*12 + 1).fill(0).map((value,index)=>(('0'+Math.floor(index/12)).slice(-2)+':'+('0'+(index%12)*5).slice(-2)));
						that.data1 = [];
						that.data2=[];
						that.data3=[];
						that.data4=[];
						that.data5=[];
						that.data6=[];
						that.data7=[];
						that.data8=[];
						that.logData=[];
						that.queryChartsFn();
						that.queryChartsFn2();
						that.queryChartsFn3();
						that.queryChartsFn4();
						that.queryChartsFn5();
						that.queryChartsFn6();
						that.queryChartsFn7();
						that.queryChartsFn8();
						that.logStatisticsFn()
						setTimeout(function(){
								const data1 = [that.data1,that.data2,that.data3]
								that.addHydrogenChartLoad(
								    {
								        names: that.dates2,
								        data: [that.data7,that.data8],
								    }
								);

								that.fdLineChartLoad(
								    {
								        names: that.dates,
								        data: [
								            that.data1,
								            that.data2,
								            that.data3,
								        ],
								    }
								);

								that.todayCountChartLoad(
								    {
								        names: that.dates,
								        data: [
								            that.data4,
								            that.data5,
														that.data6,
								        ],
								    }
								);

								that.warnStatChartLoad(
								    {
								        names: ['故障', '告警',],
								        data: [
								            [that.logData.error.urgent, that.logData.warning.urgent],
								            [that.logData.error.important, that.logData.warning.important],
								            [that.logData.error.secondary, that.logData.warning.secondary],
								            [that.logData.error.general, that.logData.warning.general],
								        ],
								    }
								);
						},1000)
					},1000*60)

        },
        destroyed() {
            if( this.timer ) {
                clearInterval(this.timer);
            }
        },
    }
</script>

<style lang="less">
    .right-panel_wrap {
        width: 100%;
        height: 100%;
        padding-top: 42px;
        padding-left: 30px;
        padding-right: 15px;
        box-sizing: border-box;

        >.operation-chart {
            width: 100%;
            height: calc( 100% - 350px );

            >.chart-item {
                width: 100%;
                height: 32%;
            }
        }

        >.add-info {
            height: 280px;
            width: 100%;

            >.add-info-img {
                width: 100%;
                height: 107px;
                background-image: url("../../assets/images/largeScreen/img_add.png");
                background-repeat: no-repeat;
                background-position: center center;
            }

            >.chart-box {
                width: 100%;
                height: calc( 100% - 107px );
            }
        }
    }
</style>
